<template>
  <el-dialog :visible.sync="visible" :title="isEdit?'编辑':'新增'" :close-on-click-modal="false" @open="handleOpen" @closed="handleClosed">
    <div>
      <QupFormContainer :column="1">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
          <el-form-item prop="managerAccount" label="招商经理">
            <c-common-search-domain-user
              v-if="visible"
              v-model="formData.managerAccount"
              :label.sync="formData.managerName"
              :phone.sync="formData.managerPhone"
              :disabled="isEdit"
            />
          </el-form-item>
          <el-form-item prop="managerName" label="招商经理姓名">
            <el-input v-model="formData.managerName" placeholder="招商经理姓名" disabled />
          </el-form-item>
          <el-form-item prop="managerPhone" label="招商经理电话">
            <el-input v-model="formData.managerPhone" placeholder="招商经理电话" clearable />
          </el-form-item>
        </el-form>
      </QupFormContainer>
      <div class="btn-center">
        <c-button type="default" @click="handleCancel">取消</c-button>
        <c-button type="primary" @click="handleConfirm">确定</c-button>
      </div>
    </div>
  </el-dialog>

</template>
<script>
import { leasingManagerAdd, leasingManagerEdit } from '@/api/channelTask2/leasingManager'
const validatePhone = (r, v, c) => {
  if (!v) {
    c(new Error('请输入招商经理电话'))
  } else if (!/^1\d{10}$/.test(v)) {
    c(new Error('手机号格式错误'))
  } else {
    c()
  }
}

export default {
  name: 'AddEdit',
  data() {
    return {
      visible: false,
      formData: {
        managerAccount: '',
        managerName: '',
        managerPhone: ''
      },
      selectedData: null,
      formRules: {
        managerAccount: [{ required: true, message: '请选择招商经理', trigger: 'change' }],
        managerPhone: [{ required: true, validator: validatePhone, trigger: 'change' }]
      }
    }
  },
  computed: {
    isEdit() {
      return !!this.selectedData
    }
  },
  methods: {
    openDialog(row) {
      if (row) {
        this.selectedData = row
      }
      this.visible = true
    },
    handleClosed() {
      this.selectedData = null
      this.formData = {
        managerAccount: '',
        managerName: '',
        managerPhone: ''
      }
      this.$nextTick(() => {
        // this.$refs.form && this.$refs.form.resetFields()
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    handleOpen() {
      if (this.isEdit) {
        Object.keys(this.formData).forEach(k => {
          this.$set(this.formData, k, this.selectedData[k])
        })
      }
    },
    handleCancel() {
      this.visible = false
    },
    handleConfirm() {
      return this.$refs.form.validate().then(() => {
        let data
        if (this.isEdit) {
          data = {
            id: this.selectedData.id,
            ...this.formData
          }
        } else {
          data = { ...this.formData }
        }
        return (this.isEdit ? leasingManagerEdit : leasingManagerAdd)(data).then(res => {
          this.$message.success('操作成功')
          this.visible = false
          this.$emit('on-success', this.isEdit ? 'onPage' : 'opCondition')
        })
      })
    }
  }
}
</script>
